<script setup lang="ts">
import { h, ref, onMounted, reactive } from "vue";
import {
  NButton,
  zhCN,
  dateZhCN,
  NText,
  useMessage,
  NPopconfirm,
} from "naive-ui";

import { userMeragement } from "@/stores/Meragement";
const Meragement = userMeragement();
const message = useMessage();

const columns = [
  {
    type: "selection",
    disabled(row: RowData) {
      return row.name === "select";
    },
  },
  {
    title: "#",
    key: "no",
    render: (_, index) => {
      return `${index + 1}`;
    },
  },
  {
    title: "商户名",
    key: "loginName",
  },
  {
    title: "店铺名称",
    key: "name",
  },
  {
    title: "店铺介绍",
    key: "introduction",
  },
  {
    title: "联系电话",
    key: "tel",
  },
  {
    title: "申请时间",
    key: "time",
    render(rowData: object, rowIndex: number) {
      return h(
        NText,
        {},
        {
          default: () =>
            String(new Date(rowData.time).getFullYear()) +
            "-" +
            String(new Date(rowData.time).getMonth() + 1).padStart(2, "0") +
            "-" +
            String(new Date(rowData.time).getDate()).padStart(2, "0"),
        }
      );
    },
  },
  {
    title: "店铺地址",
    key: "address",
  },
  {
    title: "操作",
    key: "actions",
    render(row) {
      return [
        h(
          NButton,
          {
            strong: true,
            tertiary: true,
            size: "small",
            type: "primary",
            onClick: () => modify(row),
          },
          { default: () => "重申" }
        ),
        h(
          NPopconfirm,
          {
            onPositiveClick: () => positiveClick(row),
            onNegativeClick: () => negativeClick(),
            negativeText: "取消",
            positiveText: "确定",
          },
          {
            trigger: () =>
              h(
                NButton,
                {
                  strong: true,
                  tertiary: true,
                  size: "small",
                  type: "success",
                  style: {
                    marginLeft: "20px",
                    color: "red",
                    backgroundColor: "#FFB6C1",
                  },
                },
                { default: () => "删除" }
              ),
            default: () => h("span", {}, "你确定要删除吗？？？"),
          }
        ),
      ];
    },
  },
];
onMounted(() => {
  Meragement.getListss();
});
// 表单
const formRef = ref(null);
const model = reactive({
  textareaValue: "",
});
//表单验证
const rules = {
  textareaValue: {
    required: true,
    trigger: ["blur", "input"],
    message: "请填写拒绝理由",
  },
};
// 分页
const pages = (i) => {
  Meragement.page = i;
  Meragement.getListss();
};
const pageSizes = (i) => {
  Meragement.pageSize = i;
  Meragement.getListss();
};
// 多选框
const checkedArr = ref();
const rowKey = (row: any) => row;
const handleCheck = (rowKeys: DataTableRowKey[]) => {
  checkedArr.value = rowKeys;
  chong.Arr = [...rowKeys];
};
// 删除  确认
const positiveClick = (row) => {
  chong.Arr = []
  Meragement.getDelete(row._id);
  Meragement.getListss();
};
// 删除   取消
const negativeClick = () => {
  message.error("您已取消删除");
};
// 批量删除
const deleArr = () => {
  console.log(checkedArr.value);
  // if (typeof checkedArr.value == undefined || "{}") {
};
// 重申
const showModal = ref(false);
const chong = reactive({
  Arr: [],
  obj: {},
});
// 点击重审
const modify = (row) => {
  console.log(row);
  showModal.value = true;
  Object.assign(chong.obj, row);
};
// 成功
const submitCallback = async () => {
  if (chong.Arr.length === 0) {
    (chong.obj.status = 0), (chong.obj.refuse = model.textareaValue);
  } else {
    // 设置数组  需要先遍历
    chong.Arr.forEach((v) => {
      (v.status = 0), (v.refuse = model.textareaValue);
    });
  }
  // 表单验证
  formRef.value?.validate(async (errors: any) => {
    if (!errors) {
      // 数组没值   就提交对象的
      if (chong.Arr.length === 0) {
        await Meragement.getModify(chong.obj);
      } else {
        // 数组遍历
        chong.Arr.forEach(async (v) => {
          await Meragement.getModify(v);
        });
      }
      showModal.value = false;
      model.textareaValue = "";
      chong.obj = {};
      chong.Arr = [];
      Meragement.getListss();
    }
  });
};
// 弹出框  取消
const cancelCallback = () => {
  showModal.value = false;
};
// 点击批量重审
const chongshenArr = () => {
  showModal.value = true;
};
// 批量删除  弹出框
const handlePositiveClick2 = () => {
  if (chong.Arr.length == 0) {
    message.error("请您至少选中一个或以上的数据");
    return;
  }
  checkedArr.value.map((i) => {
    positiveClick(i);
  });
}
const handleNegativeClick2 = () => {
  message.error("您已点击取消");
}

</script>


<template>
  <n-button type="info" @click="chongshenArr"> 批量重申 </n-button>
  <n-popconfirm @positive-click="handlePositiveClick2" @negative-click="handleNegativeClick2" negative-text="取消"
    positive-text="确认">
    <template #trigger>
      <n-button class="deA" strong secondary type="success" @click="deleArr">
        批量删除
      </n-button>
    </template>
    确定要删除吗！！！
  </n-popconfirm>

  <n-data-table :columns="columns" :data="Meragement.list" :bordered="false" @update:checked-row-keys="handleCheck"
    :row-key="rowKey" />

  <n-config-provider :locale="zhCN" :date-locale="dateZhCN">
    <n-pagination v-model:page="Meragement.page" v-model:page-size="Meragement.pageSize" @update:page="pages"
      @update:page-size="pageSizes" :item-count="Meragement.total" :page-sizes="[3, 5, 7, 10]" size="medium"
      show-quick-jumper show-size-picker />
  </n-config-provider>

  <n-modal v-model:show="showModal" preset="dialog" title="重审理由" content="你确认?">
    <n-form ref="formRef" :model="model" :rules="rules" label-placement="left" label-width="auto"
      require-mark-placement="right-hanging" :size="size" :style="{
        maxWidth: '640px',
      }">
      <n-grid :cols="24" :x-gap="24">
        <n-form-item-gi :span="16" label="重审理由" path="textareaValue">
          <n-input v-model:value="model.textareaValue" placeholder="请您输入重申理由" type="textarea" :autosize="{
            minRows: 3,
            maxRows: 5,
          }" />
        </n-form-item-gi>
        <n-form-item-gi :span="17" style="justify-self: center">
          <n-button type="default" @click="cancelCallback"> 取消 </n-button>
          <n-button type="info" class="save" @click="submitCallback">
            确认
          </n-button>
        </n-form-item-gi>
      </n-grid>
    </n-form>
  </n-modal>
</template>

<style scoped>
.n-data-table {
  padding: 20px 0;
}

.deA {
  margin-left: 30px;
}

.save {
  margin-left: 70px;
}
</style>